<template>
  <div class="device-box">
    <div class="video-background">
      <video autoplay loop muted playsinline>
        <source src="../assets/video/devicevideosmail.mp4" type="video/mp4" />
      </video>
    </div>
    <div class="content">
      <el-row v-loading="loading">
        <el-col :span="12" :xs="24"> </el-col>
        <el-col :span="12" :xs="24">
          <el-row :gutter="10">
            <el-col :span="12" :xs="24">
              <div class="data-screen-card" :style="{ height: rightCardHeight2 }">
                <div class="card-title">维修单统计</div>
                <div class="card-content">
                  <ElRow v-if="maintenanceInfo">
                    <ElCol :span="8">
                      <LiquidfillSmall :value="maintenanceInfo.totalCount" viewFormat="num" title="维修单总数" />
                    </ElCol>
                    <ElCol :span="8">
                      <LiquidfillSmall :value="maintenanceInfo.passRate" title="维修验证通过率" />
                    </ElCol>
                    <ElCol :span="8">
                      <LiquidfillSmall :value="maintenanceInfo.underwayCount" viewFormat="num" title="进行中维修单" />
                    </ElCol>
                  </ElRow>
                </div>
              </div>
              <div class="data-screen-card" :style="{ height: rightCardHeight1 }">
                <div class="card-title">设备报修</div>
                <div class="card-content">
                  <BiBaseChart :option="maintenanceStatusOption" />
                </div>
              </div>
              <div class="data-screen-card" :style="{ height: rightCardHeight1 }">
                <div class="card-title">维修单统计</div>
                <div class="card-content">
                  <BiBaseChart :option="maintenanceOrderOption" />
                </div>
              </div>
            </el-col>
            <el-col :span="12" :xs="24">
              <div class="data-screen-card" :style="{ height: rightCardHeight2 }">
                <div class="card-title">设备保养</div>
                <div class="card-content">
                  <ElRow v-if="maintainInfo">
                    <ElCol :span="8">
                      <LiquidfillSmall :value="maintainInfo.totalCount" viewFormat="num" title="保养单统计" />
                    </ElCol>
                    <ElCol :span="8">
                      <LiquidfillSmall :value="maintainInfo.passRate" title="保养验证通过率" />
                    </ElCol>
                    <ElCol :span="8">
                      <LiquidfillSmall :value="maintainInfo.underwayCount" viewFormat="num" title="进行中保养单" />
                    </ElCol>
                  </ElRow>
                </div>
              </div>
              <div class="data-screen-card" :style="{ height: rightCardHeight1 }">
                <div class="card-title">设备保养</div>
                <div class="card-content">
                  <BiBaseChart :option="maintainStatusOption" />
                </div>
              </div>
              <div class="data-screen-card" :style="{ height: rightCardHeight1 }">
                <div class="card-title">保养单统计</div>
                <div class="card-content">
                  <BiBaseChart :option="maintainOrderOption" />
                </div>
              </div>
            </el-col>
            <el-col :span="24" :xs="24">
              <div class="data-screen-card" :style="{ height: rightCardHeight1 }">
                <div class="card-title">区域巡检</div>
                <div class="card-content">
                  <BiBaseChart :option="inspectionOption" />
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<!-- 设备看板 -->
<script setup lang="ts">
import { ref } from 'vue';
import { lineChart, onceBarChart } from './components/echarts';
import {
  getAbnormalStatistics,
  getMaintainAllOrderVolumeStatistics,
  getMaintainOrderGrowthStatistics,
  getMaintainOrderStatusStatistics,
  getMaintenanceAllOrderVolumeStatistics,
  getMaintenanceOrderGrowthStatistics,
  getMaintenanceOrderStatusStatistics,
} from '../api/device';

defineOptions({
  name: 'Device',
});

const props = defineProps({
  type: {
    type: Number,
    default: 2, //统计类型:1-代表本周;2-代表本月;3-代表本年;4-代表自定义时间
  },
  timeRange: {
    type: Object,
    default: {
      startTime: '',
      endTime: '',
    }, //时间区间
  },
});

const rightCardHeight1 = ref<any>('calc((var(--vh, 1vh) * 100 - 324px) / 3)');
const rightCardHeight2 = ref<any>('calc((var(--vh, 1vh) * 100 - 400px) / 3)');

// 设备维修
let maintenanceInfo = ref<any>(null);
const maintenanceStatusOption = ref<any>(null);
const maintenanceOrderOption = ref<any>(null);
// 设备保养
let maintainInfo = ref<any>(null);
const maintainStatusOption = ref<any>(null);
const maintainOrderOption = ref<any>(null);
// 巡检
const inspectionOption = ref<any>(null);

const loading = ref(false);

// 获取页面数据
const getPageData = async () => {
  loading.value = true;


  await getMaintenanceData();
  await getMaintainData();
  await getInspectionData();

  loading.value = false;
};

// 设备维修数据
const getMaintenanceData = async () => {
  try {
    let res = await getMaintenanceAllOrderVolumeStatistics({
      type: props.type,
      ...props.timeRange,
    });

    let res1 = await getMaintenanceOrderStatusStatistics({
      type: props.type,
      ...props.timeRange,
    });
    let res2 = await getMaintenanceOrderGrowthStatistics({
      type: props.type,
      ...props.timeRange,
    });

    maintenanceInfo.value = {
      passRate: res.data.passRate,
      totalCount: res.data.totalCount,
      underwayCount: res.data.underwayCount,
    };

    maintenanceStatusOption.value = onceBarChart({ ...res1.data }, '', '维修单个任务状态统计');
    maintenanceOrderOption.value = lineChart({ ...res2.data }, '', '时间内维修单新增数量');

  } catch (error) {
    console.log(error, 'errr');
  }
};
// 设备保养
const getMaintainData = async () => {
  try {
    let res = await getMaintainAllOrderVolumeStatistics({
      type: props.type,
      ...props.timeRange,
    });

    let res1 = await getMaintainOrderStatusStatistics({
      type: props.type,
      ...props.timeRange,
    });
    let res2 = await getMaintainOrderGrowthStatistics({
      type: props.type,
      ...props.timeRange,
    });

    maintainInfo.value = {
      passRate: res.data.passRate,
      totalCount: res.data.totalCount,
      underwayCount: res.data.underwayCount,
    };

    maintainStatusOption.value = onceBarChart({ ...res1.data }, '', '保养单任务状态统计');
    maintainOrderOption.value = lineChart({ ...res2.data }, '', '时间内保养单新增数量');
  } catch (error) {
    console.log(error, 'errr');
  }
};
// 巡检
const getInspectionData = async () => {
  try {
    let res = await getAbnormalStatistics({
      type: props.type,
      ...props.timeRange,
    });

    inspectionOption.value = lineChart({ ...res.data }, '', '区域巡检异常巡检项统计');
  } catch (error) {
    console.log(error, 'errr');
  }
};

defineExpose({
  getPageData,
});
</script>

<style lang="scss" scoped>
.device-box {
  position: relative;
  .video-background {
    position: fixed;
    top: 85px;
    right: 0;
    bottom: 0;
    left: -20%;
    overflow: hidden;
    z-index: -1;
    width: 100%;
    video {
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      object-fit: cover; /* Maintain aspect ratio */
    }
  }

  .content {
    position: relative;
    z-index: 1;
  }
}

.data-screen-card {
  :deep() {
    .el-row {
      height: calc(100% - 20px);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  &.main {
    // background-color: #00043c;
    background: #0f0c29; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(
      to right,
      #24243e,
      #302b63,
      #0f0c29
    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    .center_fan {
      width: 100%;
      height: 60%;
    }
  }
}

.data-screen-card {
  width: 100%;
  min-height: 160px;
  margin-bottom: 10px;
  margin-top: 12px;
  border-radius: 5px;
  box-shadow: 0px 0px 6px rgba(195, 211, 222, 0.501960784313725);
  background: #011320;


  &:last-child{
    margin-top: 0;
  }

  display: flex;
  flex-direction: column;

  .card-title {
    padding: 16px;
    padding-bottom: 0px;

    span {
      display: inline-block;
      text-align: left;
      height: 20px;
      padding-left: 10px;
      line-height: 20px;
      text-align: left;
      border-left: 3px solid #01ffff;
      width: 140px;
      white-space: nowrap;
      /* 确保文本在一行内显示 */
      overflow: hidden;
      /* 隐藏溢出的内容 */
      text-overflow: ellipsis;
      /* 使用省略号表示文本溢出 */
    }
  }

  .card-content {
    flex: 1;
    /* 占满剩余空间 */

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    :deep() {
      .el-row {
        width: 100%;
        .el-col {
          height: 100%;
        }
      }
    }
  }

  .card-yq {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }

  .card-scroll {
    overflow: hidden;
    flex: 1;
  }

  .grid-title {
    text-align: center;
  }

  &::before {
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: 30px;
    z-index: 0;
    width: calc(100% - 60px);
    pointer-events: none;
    content: '';
    border-top: 3px solid #101f58;
    border-bottom: 3px solid #101f58;
  }

  &::after {
    position: absolute;
    top: 30px;
    right: -3px;
    left: -3px;
    z-index: 0;
    height: calc(100% - 60px);
    pointer-events: none;
    content: '';
    border-right: 3px solid #101f58;
    border-left: 3px solid #101f58;
  }
}
</style>
